<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button class="ml-20px" @click="startUpload">开始上传</button>
    <button class="ml-20px" @click="pauseUpload">暂停上传</button>
    <button class="ml-20px" @click="resumeUpload">恢复上传</button>
    <button class="ml-20px" @click="getFileId">获取文件id</button>
    <button class="ml-20px" @click="onSubmit">提交</button>

    <p>
      上传进度：{{ uploader?.progress }}
      <a-progress type="circle" class="ml-20px" :percent="uploader?.progress" />
    </p>
    <div>
      <!-- <a-table
        :dataSource="uploader?.chunks"
        :columns="columns"
        :pagination="false"
        :scroll="{ y: 240 }"
      /> -->
    </div>
  </div>
</template>

<script setup>
import FileUploader from "./index"; // 请将 FileUploader 类的定义放在单独的文件中，并引入
import { Progress } from "ant-design-vue";
const uploader = ref(null);
const fileInfo = reactive({
  id: "",
});

const columns = [
  {
    title: "序号",
    dataIndex: "index",
    fixed: true,
  },
  {
    title: "分片hash",
    dataIndex: "chunkHash",
  },
  {
    title: "分片大小（字节）",
    dataIndex: "size",
  },
  {
    title: "状态",
    dataIndex: "status",
  },
  // {
  //   title: "进度",
  //   dataIndex: "progress",
  //   customRender: ({ text }) => {
  //     return <Progress percent={text}></Progress>;
  //   },
  // },
  {
    title: "最多重试次数",
    dataIndex: "retryNum",
  },
  {
    title: "已重试次数",
    dataIndex: "retryNumed",
  },
];
const handleFileChange = (event) => {
  const file = event.target.files?.[0];
  console.log(event);
  if (file) {
    uploader.value = new FileUploader({
      file,
      chunkSize: 1024 * 1024 * 5,
      path: event.target.value.replace(/^[^:]+:/, ""),
      // numSamples: 20,
      isAutoSample: true,
    });
  }
};

const startUpload = () => {
  uploader.value.startUpload();
};

const pauseUpload = () => {
  uploader.value.pauseUpload();
  console.log(uploader.value?.pauseFlag, "是否暂停");
};

const resumeUpload = () => {
  uploader.value.resumeUpload();
};

const getFileId = () => {
  fileInfo.id = uploader.value.getFileId();
};

const onSubmit = () => {
  console.log("文件id", uploader.value.unbrokenFileId);
};
</script>
